<template>
  <a-modal v-model:visible="dialogVisiable" title-align="start" @ok="handleOk" @cancel="handleCancel" width="850px">
    <template #title> 添加用户 </template>
    <a-col :span="10">
      <a-form-item label="角色名称">
        <a-input v-model="$props.roleName" disabled />
      </a-form-item>
    </a-col>
    <div class="user-title">选择用户</div>
    <div class="list-header search-style">
      <a-form
        laba-position="right"
        :model="listFilterForm"
        class="list-filter-form"
        ref="listFilterFormRef"
      >
        <a-row align="middle" class="multipleFilters">
          <a-col :span="10">
            <a-form-item label="" label-col-flex="0">
              <a-input-search
                v-model.trim="listFilterForm.account"
                type="text"
                placeholder="请输入用户账号"
                @change="getUserList"
              >
              <template #prefix>用户账号</template>
            </a-input-search>
            </a-form-item>
          </a-col>
          <a-col :span="1"></a-col>
          <a-col :span="10">
            <a-form-item label="" label-col-flex="0">
              <a-input-search
                v-model.trim="listFilterForm.username"
                type="text"
                placeholder="请输入用户名称"
                @change="getUserList"
              >
              <template #prefix>用户名称</template>
            </a-input-search>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="list-main">
      <div class="select-box">
        <span>已选{{multipleSelection.length}}项</span>
        <span @click="handleCancelSel">取消</span>
      </div>
      <a-table row-key="account" :columns="columns" :data="tableData" :pagination="false" :row-selection="rowSelection" v-model:selectedKeys="multipleSelection">
      </a-table>
      <div class="page-box w-full h-[40px] overflow-hidden flex justify-end items-center">
        <a-pagination
          :total="page.total"
          show-total
          show-page-size
          @page-size-change="handleSizeChange"
          @change="handleCurrentChange"
        />
      </div>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue';
import { user_list } from '@/api/roleManagement/roleManagement.ts';
const listFilterFormRef = ref();
const listFilterForm = ref({
  username: '',
  account: ''
});
const tableData = ref([]);
const loading = ref();
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: true
});
const page = ref({
  page: 1,
  page_size: 10,
  total: 0
});
const multipleSelection = ref([]);
const props = defineProps({
  roleName: String,
  visiable: Boolean
});
const dialogVisiable = ref();
watch(
  () => props.visiable,
  (newVal) => {
    dialogVisiable.value = newVal;
  }
);
const columns = [
  {
    title: '用户账号',
    dataIndex: 'account',
    slotName: 'account',
    ellipsis:true,
    tooltip:true
  },
  {
    title: '用户名称',
    dataIndex: 'username',
    slotName: 'username',
    ellipsis:true,
    tooltip:true
  },
  {
    title: '所属组织',
    dataIndex: 'org_name',
    slotName: 'org_name',
    ellipsis:true,
    tooltip:true
  },
  {
    title: '类型',
    dataIndex: 'org_type',
    slotName: 'org_type',
    ellipsis:true,
    tooltip:true
  }
];
onMounted(() => {
  getUserList();
});
const emit = defineEmits(['onClose']);

const getUserList = async () => {
  try {
    loading.value = true;
    user_list({
      page: page.value.page,
      page_size: page.value.page_size,
      ...listFilterForm.value
    }).then((res:any) => {
      console.log(res)
      tableData.value = res.data;
      page.value.page = res.page;
      page.value.page_size = res.page_size;
      page.value.total = res.total;
      loading.value = false;
    });
  } catch (error) {
    loading.value = false;
  }
};
/**
 * @method 重置搜索框
 */
const resetForm = () => {
  listFilterForm.value = {
    username: '',
    account: ''
  };
  getUserList();
};
// 分页
const handleSizeChange = (e: number) => {
  page.value.page_size = e;
  getUserList();
};
const handleCurrentChange = (e: number) => {
  page.value.page = e;
  getUserList();
};
/**
 * 取消选择的用户
 */
const handleCancelSel = () => {
  multipleSelection.value = []
}

const handleCancel = () => {
  emit('onClose', []);
  multipleSelection.value = [];
};
const handleOk = () => {
  console.log(multipleSelection.value)
  let accoutArr =
    multipleSelection.value.length === 0 ? [] : multipleSelection.value;
  emit('onClose', accoutArr);
  multipleSelection.value = [];
};
</script>
<style scoped lang="less">
.user-title {
  font-size: 16px;
  font-weight: 700;
  color: #394d73;
  padding-bottom: 16px;
}
.list-main {
  .select-box {
    font-size: 14px;
    font-weight: 400;
    color: #465A80;
    margin-bottom: 20px;
    span:last-child {
      color: #1459FA;
      margin-left: 20px;
      cursor: pointer;
    }
  }
  .page-box {
    margin-top: 16px;
  }
}
:deep(.arco-modal-title) {
    font-size: 16px;
  color: #394d73;
}
.multipleFilters {
:deep(.arco-form-item-label-col) {
    padding-right: 0;
}
}
:deep(.arco-table-th) {
  color: #394D73;
}
:deep(.arco-table-td) {
  color: #465A80;
}
</style>
